<!DOCTYPE html>
<html>
    <!-- JavaScript层次节点练习 -->
    <head>
        <meta charset="utf-8"/>
      
    </head>
    <style>
        .div{
            font-size:50px;
        }
        .div{
            font-size: 16px;
        }
    </style>
    <body>
        
<ul id="ul" class ="ul">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    <li>第四项</li>
</ul>
<div style="width:100%;height:30px;background-color: blue;" id="div1">

</div>
<br/>
<button onclick="delUl()">删除ul</button>

<button onclick="divReplaceUl()">新建div替换ul</button>
<script type="text/javaScript">
    
    function delUl(){
        var ul = document.getElementById("ul");
        if(ul){
            document.body.removeChild(ul);//从ul的父容器body中删除ul节点
        }else{
            alert("ul已经被删除！");
        }
    }
    function divReplaceUl() {
        var new_div = document.createElement("div");
        new_div.setAttribute("style","width:100%;height:20px;background-color:yellow;")        
        var ul = document.getElementById("ul");
        document.body.replaceChild(new_div,ul);
    }
       
</script>
</body>

</html>